<template>
  <view class="page flex-col">
    <view class="box_2 flex-col">
      <view class="section_1 flex-col">
        <text class="text_2">{{ businfo?.title }}</text>
        <text class="text_3">{{ businfo?.salary_down + '-' + businfo?.salary_up }}元/月</text>
        <view class="box_3 flex-row justify-between">
          <view class="image-text_1 flex-row justify-between">
            <image
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              :src="
                businfo?.logo
                  ? businfo?.logo
                  : '@/assets/lanhu_79gongzuoxiangqingzhang/SketchPngc192a815ecd2bf337dc4c1b2aec0ecfff12dc33f602779eac7da2a21611f632c.png'
              "
            />
            <text class="text-group_1">{{ businfo?.city }}</text>
          </view>
          <view class="image-text_2 flex-row justify-between">
            <image
              class="thumbnail_4"
              referrerpolicy="no-referrer"
              src="@/assets/lanhu_79gongzuoxiangqingzhang/SketchPngddcf41dd05a1aeda9627bdbab96d0a2a5c1fb6f50e2032ef91da03c87bfc83e1.png"
            />
            <text class="text-group_2">{{ businfo?.category_name }}</text>
          </view>
          <!-- <view class="image-text_3 flex-row justify-between">
            <image
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              src="@/assets/lanhu_79gongzuoxiangqingzhang/944fd0077f8449c89f2cf5738ce2696e_mergeImage.png"
            />
            <text class="text-group_3">不限经验</text>
          </view> -->
        </view>
      </view>
      <view class="box_4 flex-col">
        <text class="text_17">公司介绍</text>
        <view class="image-text_4 flex-row justify-between">
          <image
            class="label_1"
            referrerpolicy="no-referrer"
            src="@/assets/lanhu_59wode/business.png
            "
          />
          <view class="text-group_5 flex-col justify-between">
            <text class="text_18">{{ businfo?.company_name }}</text>
            <!-- <text class="text_19">

              {{ businfo?.company_desc }}
            </text> -->
            <view class="text_desc">
              {{ businfo?.company_desc }}
            </view>
          </view>
        </view>
        <view class="box_5 flex-col">
          <map
            id="map"
            style="width: 100%; height: 300px"
            longitude="113.324520"
            latitude="23.099994"
            scale="14"
            :markers="markers"
            :polyline="polyline"
            class="map"
            :show-location="true"
            @regionchange="regionchange"
            @markertap="markertap"
          />
        </view>
      </view>
    </view>

    <view class="box_7 flex-row">
      <view class="text-group_6 flex-col justify-between">
        <text class="text_22">所需技能</text>
        <text class="paragraph_3">
          {{ businfo?.requirement }}
        </text>
      </view>
    </view>
    <view class="box_6 flex-row">
      <view @click="collect">
        <image class="label_2" referrerpolicy="no-referrer" :src="isfavtor ? img3 : img2" />
      </view>
      <view v-if="applyoff" class="text-wrapper_6 flex-col" @click="apply">
        <text class="text_21">立即报名</text>
      </view>
      <view v-if="!applyoff" class="text-wrapper_6 flex-col">
        <text class="text_21">已申请</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import '@/static/common.less';

import './index.less';
import { onMounted, ref, getCurrentInstance, toRef } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import { getPersonalInfoApi } from '@/api/user';
import { WorkDetail } from '@/api/proto';
import { position, favor, application, ecruitresume, favorsee, lookapplication } from '@/api/moredetail';
import { loginuser } from '@/utils/common';
import MarkCard from '@/components/mark-card/index.vue';
import img2 from '../../assets/lanhu_79gongzuoxiangqingzhang/favtor.png';
import img3 from '../../assets/lanhu_79gongzuoxiangqingzhang/favtoralready.png';
import positionimg from '../../assets/lanhu_59wode/position.png';
const showBuyAndDevPopup = ref(false);
const visible = ref(false);
let isfavtor = ref(false);
let applyoff = ref(false);

let userinfo = Taro.getStorageSync('useInfo'); //用户信息

let businfo = ref<WorkDetail>(null);
let { id = '1' } = Taro.getCurrentInstance().router.params;
let collect = () => {
  let getid = (userinfo && JSON.parse(userinfo)?.user_id) || 4;
  favor({
    user_id: getid,
    position_id: Number(id),
    userId:getid,
    positionId: Number(id),
  }).then((res: any) => {
    if (res.code == 1600) {
      isfavtor.value = true;
    }
    Taro.showToast({
      title: res?.message,
      icon: 'none',
      duration: 2000,
    });
  });
};

let apply = () => {
  let getid = (userinfo && JSON.parse(userinfo)?.user_id) ;
  // {"user_id":4,"position_id":3,"resume_id":1,"hr_id":7,"company_id":2}
  application(
    { positionId: id, userId: getid },
    { position_id: Number(id) , user_id: getid, hr_id: businfo.value?.hr_id, company_id: businfo.value?.company_id },
  ).then((res: any) => {
    if(res.code == 7000){
      applyoff.value = true
    }
    Taro.showToast({
      title: res?.message,
      icon: 'none',
      duration: 2000,
    });
  });

};
position({ id }).then((res) => {
  businfo.value = res;
});
const getfavtor = () => {
  let getid = (userinfo && JSON.parse(userinfo)?.user_id) || 4;
  favorsee({ userId: getid, positionId:  Number(id) }).then((res) => {
    isfavtor.value = res;
  });
};
const applicationUser = () => {
  let getid = (userinfo && JSON.parse(userinfo)?.user_id) || 4;
  lookapplication({ positionId:  Number(id), userId: getid }).then((res) => {
    applyoff.value = res;
  });
};
loginuser(getfavtor); //查看是否 收藏
loginuser(applicationUser); //查看申请 收藏

let markers = ref([
  {
    iconPath: positionimg,
    id: 0,
    latitude: 23.099994,
    longitude: 113.32452,
    width: 50,
    height: 50,
  },
]);
let polyline = ref([
  {
    points: [
      {
        longitude: 113.3245211,
        latitude: 23.10229,
      },
      {
        longitude: 113.32452,
        latitude: 23.21229,
      },
    ],
    color: '#FF0000DD',
    width: 2,
    dottedLine: true,
  },
]);
const regionchange = (e) => {
  console.log(e.type);
};
const markertap = (e) => {
  console.log('markertap:', e.detail.markerId);
};
</script>
